import { useEffect,useState } from 'react';
import { SystemMessageList } from '../../api/Home/index';
import LoginStore from '../../store/Login/index';
import { LeftOutlined, MoonOutlined } from '@ant-design/icons';
import { Avatar, List } from 'antd';

const SystemMessage = ({back}) => {
    const { userInfo } = LoginStore();//用户实例

    const [messageList,setMessageList]=useState([]);

    useEffect(() => {
        SystemMessageList(userInfo.id).then(({ data }) => {
            console.log(data.data);

            setMessageList(data.data);
        })
    },[])

    return (
        <>
            <div className="flex justify-between">
                <LeftOutlined onClick={()=>{back()}} />
                <h1>系统消息</h1>
                <MoonOutlined />
            </div>

            <div className='text-left mt-10'>
                <List
                    itemLayout="horizontal"
                    dataSource={messageList}
                    renderItem={(item) => (
                        <List.Item className='text-left mt-5'>
                            <List.Item.Meta
                                avatar={<Avatar src={`http://192.168.44.133:9000/skyhub-bucket/Avatars/20250307_16450238.jpeg`} />}
                                title={<a>{item.title}</a>}
                                description={item.message}
                            />
                        </List.Item>
                    )}
                />
            </div>
        </>
    );
}

export default SystemMessage;